<template>
  <div class="my_contain">
    <el-tree
      :data="data"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
      :check-strictly="false">
    </el-tree>
    <div class="buttons">
      <el-button @click="getCheckedNodes">通过 node 获取</el-button>
      <el-button @click="setCheckedNodes">通过 node 设置</el-button>
      <el-button @click="getCheckedKeys">通过 key 获取</el-button>
      <el-button @click="setCheckedKeys">通过 key 设置</el-button>
      <el-button @click="resetChecked">清空</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          name: 'mimi',
          label: '基础信息管理',
          children:[
            {
              id: 6,
              name: 'assets',
              label: '资产管理',
              children: [
                { id: 13, name: '/mimi/list', label: 'U盘资产' },
                { id: 14, name: '/mimi/assets/terminalList', label: '终端资产' },
                { id: 15, name: '/mimi/assets/printerList', label: '打印机资产' },
                { id: 16, name: '/mimi/assets/burnerList', label: '刻录机资产' },
              ]
            },
            {
              id: 7,
              name: 'person',
              label: '人员管理',
              children: [
                { id: 17, name: '/mimi/person/personList', label: '人员信息' },
              ]
            },
          ]
        },
        {
          id: 2,
          name: 'status',
          label: '环境运行状态',
          children: [
            {
              id: 8,
              name: 'storage',
              label: '存储介质',
              children: [
                {
                  id: 18, 
                  name: '/status/list',
                  label: 'U盘状态',
                },
              ]
            },
            {
              id: 9,
              name: '/status/terminal/list',
              label: '终端状态',
            },
          ]
        },
        {
          id: 3,
          name: 'alarm',
          label: '告警分析',
          children: [
            {
              id: 10,
              name: 'alarm',
              label: '用户行为告警',
              children: [
                {
                  id: 19, 
                  name: '/alarm/list',
                  label: 'U盘使用告警',
                },
                {
                  id: 20, 
                  name: '/alarm/userAlarm/terminalAlarm',
                  label: '终端使用告警',
                },
              ]
            }
          ]
        },
        {
          id: 4,
          name: 'userBehavior',
          label: '深度分析',
          children: [
            {
              id: 11,
              name: 'user',
              label: '用户行为',
              children: [
                {
                  id: 21, 
                  name: '/userBehavior/list',
                  label: '用户行为',
                },
              ]
            }
          ]
        },
        {
          id: 5,
          name: 'config',
          label: '策略配置',
          children: [
            {
              id: 12,
              name: '/config/list',
              label: '终端进程白名单',
            }
          ]
        }
      ],
      test: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    // this.getUser()
  },
  methods: {
    getUser() {
      this.$axios({
        url: '/user/login',
        method: 'get'
      }).then(res => {
        console.log(res.data)
      })
    },
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes());
    },
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 9,
        label: '三级 1-1-1'
      }]);
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3]);
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    }
  }
}
</script>

<style scoped>

</style>